<template>
    <div class="w-full h-screen bg-black text-white font-sans overflow-hidden">
        <!-- 导航栏组件 -->
        <NavBar :remainingGenerations="remainingGenerations" :isLoggedIn="isLoggedIn" @navigate="handleNavigate"
            @update:visible="handleChange" @back="handleBack" />
        <!-- 主体内容区 -->
        <router-view />

        <!-- 登录模态框 -->
        <LoginModal v-model="showLoginModal" :default-mode="loginModalMode" @success="handleLoginSuccess" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import NavBar from '@/components/nav/NavBar.vue'
import LoginModal from '@/views/login/loginModal.vue'
import { useLogin } from '@/hook/useLogin'

// 使用登录功能
const {
    showLoginModal,
    loginModalMode,
    isLoggedIn,
    username,
    avatar,
    openLoginModal,
    handleLoginSuccess,
    handleLogout
} = useLogin()

const handleChange = (val) => {
    console.log('模态框打开状态: ', val)
    showLoginModal.value = val
}

</script>

<style scoped lang="less"></style>